<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Canvas, mouse drag demo</title>
		<script type="text/javascript" src="../Canvas-min.js"></script>
		<script type="text/javascript">
			function init() {
				Canvas.setEl("canvas", "2d");
				
				var lyr = new Canvas.Layer({
					id: "layer",
					items: [{
						id: "item1",
						x: 75,
						y: 75,
						width: 50,
						height: 50,
						fillStyle: "rgb(25, 100, 90)",
						draw : function (ctx) {
							
							ctx.fillStyle = this.fillStyle;
							ctx.fillRect(this.x, this.y, this.width, this.height);
						},
						on : {
							"mouseup" : function () {
								delete(this.canDrag);
							},
							"mousedown" : function () {
								this.canDrag = true;
							},
							"mousemove" : function (event, type, ctx, item) {
								if(this.canDrag) {									
									this.x = parseInt(event.mouseX - 25);
									this.y = parseInt(event.mouseY - 25);
									ctx.clearRect(0, 0, 200, 200);
									this.draw(ctx);
								}
							}
						}
					}]
				});
				
				lyr.draw();
			}
		</script>
	</head>
	<body onLoad="init()">
		<canvas id="canvas" height="200" width="200" style="border: 1px solid #000"></canvas>
	</body>
</html>
